<template>
	<view>
		<!-- 第一层 -->
		<view class="uni-list">
			<view class="top">
				<view class="top_val">
					<text class="text">签约服务商分红权</text>
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<text class="text">
						签约份数：
						<text class="red">一份10000元</text>
					</text>
				</view>
			</view>
		</view>
		<!-- 第二层 -->
		<view class="uni-list">
			<view class="top">
				<view class="top_val middle_val">
					<text class="text">资金不足？可分期付款，先选择支付一部分：</text>
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate middle_flex">
					<view class="text">自定义支付档</view>
					<view class="btn" @click="show_customize">
						<view>立即使用 </view>
					</view>
				</view>
			</view>
		</view>
		<!-- 立即使用，按钮控制隐藏显示 -->
		<view class="uni-list" :style="{display:getcustomize}">
			<view class="top">
				<view class="top_val">
					<text class="text">自选一档购买金额（元）</text>
				</view>
			</view>
			
			<!-- select栏 -->
			<view @click="showselect">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<text class="gear" v-cloak>
						一份 {{file}} 元
					</text>
				</view>
			</view>
			<!-- 点击事件控制显示隐藏 -->
			<view :style="{display:showhide}">
				<view v-for="(arr,index) in arrs" :key=index @click="option(index)" class="show_or_hide">{{arr}}</view>
			</view>
			
			<radio-group @change="radioChange">
				<view class="radio_bottom"> 确定使用：
					<label v-for="(item, index) in sure_items" :key="item.value">
						<radio :value="item.value" :checked="index === current_choose" v-cloak />{{item.name}}
					</label>
				</view>
			</radio-group>
			<view class="sure_use">
				确定使用之后可享受分红等福利，最终收益和当前选择的档位相关
			</view>
		</view>
		<!-- 付款方式 -->
		<view class="uni-list">
			<view class="top">
				<view class="top_val">
					<text class="text">付款方式：</text>
				</view>
			</view>
			<!-- 付款方式单选框 -->
			<radio-group @change="radioChange">
				<view class="radio_height">
					<label v-for="(item, index) in items" :key="item.value">
						<radio :value="item.value" :checked="index === current" v-cloak />{{item.name}}
					</label>
				</view>
			</radio-group>
		</view>
		<!-- 温馨提示 -->
		<view class="uni-list">
			<view class="top">
				<view class="top_val">
					<text class="text">温馨提示：</text>
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<view class="chg_type">
						<view class="chg_type">为了保障您的资金安全，确保签约合法有效，我们提供平台主体对公账号供您线下转账，请根据提示操作！</view>
						<view class="chg_type">点击下一步会自动提交订单并且复制订单号，根据系统返回的收款信息付款并将您的订单号写到付款备注</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<button class="next" type="primary" @click="nextpage">下一步</button>
	</view>
	
</template>

<script>
	// import tabBar from '../../../components/tab-nvue/tabBar.nvue';
	export default {
		components: {
			// tabBar
		},
		data() {
			return {
				res:[],
				agentid:'',
				new_log_no:0,
				openid:'',
				active:"active",
				// items:[{
    //                 value: 'bank',
    //                 name: '银行账户'
    //             },{
    //                 value: 'wechat',
    //                 name: '微信',
    //                 checked: 'true'
    //             }],
				items:[{
				    value: 'bank',
				    name: '银行账户',
					checked: 'true'
				}],
				sure_items:[{
				    value: 'yes',
				    name: '是',
					checked: 'true'
				},{
				    value: 'no',
				    name: '否',
				}],
				current:0,
				current_choose:0,
				showhide:'none',
				getcustomize:'none',
				arrs:['1000', '2000', '3000', '4000', '5000', '6000', '7000', '8000', '9000'],
				file:'10000',
				fenqi:'0',
				pid:'',
			};
		},
		onLoad:function(option){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.agentid = option.agentid
					this.new_log_no = option.new_log_no
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.baodan&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						this.res = res
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jumpcoin(e){
				var id =e.currentTarget.dataset.id
				uni.navigateTo({
					url: 'mingxi?id='+ id
				});
			},
			jump(e){
				var src =e.currentTarget.dataset.src
				uni.navigateTo({
					url: src
				});
			},
			// 单选按钮选中修改项的data里的current值
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i
						break
					}
					// 点击否按钮时
					if (this.current = 1) {
						this.file = 10000;
						this.fenqi = 0;
						// 重新刷新页面
						uni.navigateBack();
					}
				}
			},
			showselect () {
				this.showhide = 'block'
			},
			option(index) {
				this.showhide = 'none'
				this.file = this.arrs[index]
			},
			show_customize() {
				this.getcustomize = 'block',
				this.fenqi = 1
			},
			// 提交数据,跳转到下一页
			nextpage() {
				if (this.file == 10000) {
					this.fenqi = 0
				}
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.recharge.c2c&app=1',
					method: 'POST',
					data: {'openid':this.openid,'money':this.file,'orderId':this.new_log_no,'type':'bank','sktype':
					'中国建设银行股份有限公司重庆巴南支行,中融建盟网络科技发展有限公司重庆分公司,50050111360000001524','pid':this.agentid,'fenqi':this.fenqi},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						// 弹窗
						uni.showModal({
						content:'签约成功,即将跳转到在线签约页面',
						showCancel: false,
						confirmColor:"#DD524D",
						success(res) {
							if (res.confirm) {
									uni.navigateTo({
										url: './sign'
									});
								}
							}
						})
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
.uni-list {
	margin-bottom: 20upx;
}
.middle_val {
	height: 80upx;
	line-height: 80upx;
	border-bottom: 2upx solid #eaeaea; 
}
.top_val {
	margin: 10upx 28upx;
}
.red {
	color: red;
}
.middle_flex {
	display: flex;
}
.middle_flex .text {
	flex: 3;
}
.middle_flex .btn {
	border: 2upx solid #000;
	border-radius: 14upx;
}
.btn view {
	font-size: 20upx;
	padding: 4upx 28upx;
}

.radio_height {
	margin: 20upx 30upx;
}
.chg_type {
	font-size: 20upx;
	color: #999;
}
.next {
	background-color: #09BB07;
	margin: 0 24upx;
}
.gear {
	font-size: 26upx;
	color: red;
}
.show_or_hide {
	margin-left: 90upx;
	margin-bottom: 5upx;
	font-size: 26upx;
	color: #FF0000;
}
.radio_bottom {
	padding-left: 30upx;
	padding-bottom: 6upx;
	border-bottom: 2upx solid #eaeaea;
}
.sure_use {
	margin: 0 50upx;
	font-size: 26upx;
	color: #999;
}
</style>
